<script setup lang="ts">
import {del, get, post} from "@/axios"
import {ref, reactive, toRaw, onMounted} from "vue";
import {useMenuStore} from "@/store";
import {ElMessageBox,ElMessage} from "element-plus";

const menuPage = ref(1);
const menuSize = ref(10)
const userList = reactive([])
const userMenuList = reactive([]) 
const userMenuVis = ref(false)
const userMenuForm = reactive({
  userId: "",
  username: "",
  email: "",
  phone:"", 
  menuIds: []
})
const menuStore = useMenuStore()

const props = {
  value: "id",
  label: "name",
  children: "children"
}

const menuList = menuStore.getMenu

post("/User/GetUserAndRuleList").then((res)=> {
 if(res.status == 200){
   userList.push(...res.data);
 }
})

const indexFunc = (index:number)=>{
  return  index+=1
}
const getUserMenus = ()=>{
  get(`/User/GetUserMenuList?page=${menuPage.value}&&size=${menuSize.value}`).then((res:any)=>{
    if(res.status == 200){
     Object.assign(userMenuList,res.data)
    }
  })
}
const editUserMenuFunc = (data:any)=>{
  userMenuVis.value = true;
  userMenuForm.userId = data.id;
  userMenuForm.username = data.username;
  userMenuForm.email  = data.email;
  userMenuForm.phone  = data.phone;
  userMenuForm.menuIds = data.menuList;
}
const submitUserMenuFunc = ()=>{
      post("/User/AddUserMenu",{
        userId: userMenuForm.userId,
        menuId: toRaw(userMenuForm.menuIds)
      }).then((res:any)=>{
        if(res.status == 200){
          userMenuVis.value = false;
          getUserMenus()
        }
      })
}

const deleteUserMenuFunc = (data:any)=>{
  ElMessageBox.confirm("删除之后将会清空该用户的所有菜单权限,若是去除单个请使用编辑按钮,请问是否删除?","Warning",{
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    console.log(data.id)
  del(`/User/DeleteUserMenu?userId=${data.id}`).then((res:any)=>{
    if(res.status === 200){
      getUserMenus()
    }
  })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '你已取消!',
        })
      })
}
onMounted(()=>{
  getUserMenus()
})
</script>

<template>
<div class="user-auth-container">
  <div class="user-table-container">
    <div class="table-title">
      <span class="title">
        用户权限列表
      </span>
    </div>
    <el-table :data="userList" >
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column label="用户名" prop="userName" width="180">
      </el-table-column>
      <el-table-column label="角色" width="200">
        <template #default="{ row }">
          <el-tag class="rule-name"
              v-for="item in row.rules"
              :key="item.roleId"
              :type="'success'"
          >{{ item.ruleName }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="menu-container">
    <div class="menu-table-container">
      <div class="menu-title">
        <span class="title">
          用户菜单权限
        </span>
        <div class="user-menu-auth">
<!--          <el-button type="success">添加</el-button>-->
        </div>
      </div>
      <el-table
          :data="userMenuList"
          class="menu-table">
        <el-table-column
        label="用户名"
        prop="username"
        >
        </el-table-column>
        <el-table-column
            label="邮箱"
            prop="email"
        >
        </el-table-column>
        <el-table-column
            width="140"
            label="手机"
            prop="phone"
        >
        </el-table-column>
        <el-table-column
            label="菜单"
            >
          <template #default="{ row }">
            <div v-if="row.menuList.length !=0">
              <el-tag
                  type="success" 
                  v-for="item in row.menuList"
                  :key="item.id"
              >{{item.name}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="160">
          <template #default="{ row }">
            <el-button type="primary" @click="editUserMenuFunc(row)">编辑</el-button>
            <el-button type="danger" v-if="row.menuList.length !=0" @click="deleteUserMenuFunc(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
  
  <el-dialog v-model="userMenuVis">
    <el-form
        label-position="left"
        :model="userMenuForm"
        label-width="auto"
        style="max-width: 600px">
      <template #default>
        <el-descriptions title="用户信息:">
          <el-descriptions-item label="用户名:">{{userMenuForm.username}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{userMenuForm.phone}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{userMenuForm.email}}</el-descriptions-item>
        </el-descriptions>
        <el-form-item label="菜单权限">
            <el-tree-select
                multiple
                :props="props"
                v-model="userMenuForm.menuIds"
                :data="menuList"
                check-strictly
                :render-after-expand="false"
                style="width: 240px"
            />
        </el-form-item>
      </template>
    </el-form>
    <el-button type="primary" @click="userMenuVis = false">关闭</el-button>
    <el-button type="primary" @click="submitUserMenuFunc">提交</el-button>
  </el-dialog>
</template>

<style scoped>
.user-auth-container{
  width: 100%;
  display: flex; 
  justify-content: space-around;
}
.user-table-container{
  width: 800px;
  background-color: white;
  padding: 20px;
}
.table-title{
  margin-bottom: 10px;
}
.table-title .title{
  font-size: 18px;
}
.rule-name{
  margin-left: 10px;
  margin-bottom: 10px;
}

.menu-container{
  width: 800px;
  padding: 20px;
  background-color: white;
}
.menu-title{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.menu-title .title {
  font-size: 18px;
}
</style>